/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

/* Code blocks */
div[class*="language-"] {
  @apply relative my-6 overflow-hidden bg-block border-block;
  &::before {
    @apply absolute z-10 top-1 right-3 text-gray-400 text-xs;
  }
  pre {
    @apply relative overflow-x-auto pr-6 pl-16 py-4 leading-7;
  }
  .code-copy-btn {
    @apply text-basic bg-basic;
  }
  &:not(.line-numbers-mode) {
    .line-numbers {
      @apply hidden;
    }
  }
  &.line-numbers-mode {
    @apply relative;
    &::after {
      @apply hidden;
    }
    .line-numbers {
      @apply absolute z-10 bottom-0 w-16 text-center text-gray-400 py-4 leading-6 bg-block;
      counter-reset: line-number;
      br {
        user-select: none;
      }
      .line-number {
        position: relative;
        z-index: 3;
        user-select: none;
        &::before {
          counter-increment: line-number;
          content: counter(line-number);
        }
      }
    }
    pre code {
      @apply bg-transparent ml-0 mr-0 p-0 leading-6 !important;
    }
  }
  .highlight-lines {
    @apply absolute z-10 left-0 right-0 bottom-0 py-4 leading-7 ;
    .highlight-line {
      @apply bg-gray-500/10;
      @apply dark:bg-gray-50/10;
    }
  }
}

div[class*="language-"].line-numbers-mode code,
div[class*="language-"].line-numbers-mode pre {
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
  hyphens: none;
  @apply ml-0 bg-transparent tracking-wide text-emerald-900 dark:text-amber-50 text-sm text-left whitespace-pre leading-normal !important;
}

 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }

 .token.punctuation {
   color: #ccc;
 }

 .token.tag,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }

.token.attr-name {
  /* color: #e2777a; */
  color: #cc99cd;
}

 .token.function-name {
   color: #6196cc;
 }

 .token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }

 .token.property,
 .token.value,
 .token.class-name,
 .token.constant,
 .token.symbol {
  color: #f8c555;
   color: #8F95DA;
 }

 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   /* color: #cc99cd; */
   color: #e2777a;
 }

 .token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }

 .token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }

 .token.important,
 .token.bold {
   @apply font-semibold;
 }
 .token.italic {
  font-style: italic;
 }

 .token.entity {
   cursor: help;
 }

 .token.inserted {
   color: green;
 }

 .token.punctuation {
   @apply text-lighter;
 }

/* code-other */

@each $lang in javascript, yaml, bash, cpp, cs, css, dart, docker, fs, go, html, java, js, json, kt, less, makefile, md, markdown, php, py, rb, rs, sass, scss, sh, styl, ts, toml, vue, yml, text, typescript {
  div.language-$(lang)::before {
    content: '$(lang)';
  }
}
